<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="./static/css/bootstrap-treeview.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>
    <div id="tree"></div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="./static/js/bootstrap-treeview.min.js"></script>
    <script>
      function getTree() {
        var tree = [
          {
            text: "区域 1",
            icon: "glyphicon glyphicon-stop",
            selectedIcon: "glyphicon glyphicon-ok",
            color: "#000000",
            backColor: "#FFFFFF",
            href: "#node-1",
            selectable: true,
            state: {
              checked: true,
              disabled: false,
              expanded: true,
              selected: true
            },
            tags: ['available'],
            nodes: [
              {
                text: "模块1",
                nodes: [
                  {
                    text: "管道",
                    nodes:[
                      {text:"管线1"},
                      {text:"管线2"},
                      {text:"管线3"},
                      {text:"管线4"},
                      {text:"管线5"},
                      ]
                  },
                  {
                    text: "电仪"
                  }
                ]
              },
              {
                text: "模块2"
              }
            ]
          },
          {
            text: "区域 2"
          },
          {
            text: "区域 3"
          },
          {
            text: "区域 4"
          },
          {
            text: "区域 5"
          }
        ];      
      
        return tree;
      }
      $('#tree').treeview({data: getTree()});
    </script>
  </body>
</html>

